<template>
  <ul class="prolist">
    <li class="proitem" v-for="item of prolist" :key="item.proid" @click="todetail(item.proid)">
      <div class="itemimg">
        <img :src="item.proimg" alt="">
      </div>
      <div class="iteminfo">
        <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
        <span>￥{{ item.price }}</span>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    prolist: Array
  },
  methods: {
    todetail (proid) {
      this.$router.push({
        name: 'detail',
        params: { proid }
      })
    }
  }
}
</script>
<style lang="scss">
.prolist {
  width: 96%;
  margin: 0px 2%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .proitem {
    width: 49.5%;
    height: 2.6rem;
    margin-top: 5px;
    background: #fff;
    .itemimg {
      width: 100%;
      height: 1.8rem;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .iteminfo{
      font-size: 0.12rem;
      color: #333;
      margin: 10px 0 0 5px;
      h4 {
        font-weight: normal;
        margin-bottom: 5px;
      }
      span {
        color: crimson;
      }
    }
  }
}
</style>
